<template>
  <a-modal
    :visible="visible"
    :title="approved ? $t('审核通过') : $t('审核拒绝')"
    :mask-closable="false"
    width="500px"
    @cancel="close"
    @update:visible="(val: boolean) => emit('update:visible', val)"
  >
    <div class="review-form">
      <div class="info-panel">
        <div class="panel-title">{{ $t('提现信息') }}</div>
        <div class="panel-content">
          <div class="info-item">
            <span class="info-label">{{ $t('提现编号') }}:</span>
            <span class="info-value">{{ record?.withdrawNo }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('运营商') }}:</span>
            <span class="info-value">{{ record?.partnerName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('提现金额') }}:</span>
            <span class="info-value amount">
              {{ record?.withdrawAmount ? '¥' + record.withdrawAmount.toFixed(2) : '-' }}
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('实际到账') }}:</span>
            <span class="info-value actual-amount">
              {{ record?.actualAmount ? '¥' + record.actualAmount.toFixed(2) : '-' }}
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('申请时间') }}:</span>
            <span class="info-value">{{ record?.createTime }}</span>
          </div>
        </div>
      </div>
      
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-align="right"
        :label-col-props="{ span: 6 }"
        :wrapper-col-props="{ span: 18 }"
      >
        <a-form-item field="reviewRemark" :label="$t('审核备注')" :rules="approved ? [] : rules.reviewRemark">
          <a-textarea
            v-model="formData.reviewRemark"
            :placeholder="approved ? $t('请输入备注信息（选填）') : $t('请输入拒绝原因（必填）')"
            allow-clear
            :auto-size="{minRows: 4, maxRows: 6}"
          />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="close">{{ $t('取消') }}</a-button>
        <a-button
          :type="approved ? 'primary' : 'outline'"
          :status="approved ? 'success' : 'danger'"
          :loading="submitting"
          @click="handleSubmit"
        >
          {{ approved ? $t('确认通过') : $t('确认拒绝') }}
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, PropType, watch } from 'vue';
import { FormInstance, Message } from '@arco-design/web-vue';
import { 
  PartnerWithdrawVO,
  reviewPartnerWithdraw
} from '@/api/partner/withdraw';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object as PropType<PartnerWithdrawVO | null>,
    default: null
  },
  approved: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['update:visible', 'success']);

// 表单引用
const formRef = ref<FormInstance>();

// 提交状态
const submitting = ref(false);

// 表单数据
const formData = reactive({
  reviewRemark: ''
});

// 表单校验规则
const rules = {
  reviewRemark: [
    { 
      required: true, 
      message: '请输入拒绝原因'
    }
  ]
};

// 监听可见性变化
watch(
  () => props.visible,
  (val) => {
    if (!val) {
      formData.reviewRemark = '';
    }
  }
);

// 关闭对话框
function close() {
  emit('update:visible', false);
  formRef.value?.resetFields();
}

// 提交表单
async function handleSubmit() {
  if (!props.record || !props.record.id) return;
  
  try {
    // 如果是拒绝，需要验证拒绝原因
    if (!props.approved) {
      await formRef.value?.validate();
    }
    
    submitting.value = true;
    await reviewPartnerWithdraw(
      props.record.id, 
      props.approved, 
      formData.reviewRemark
    );
    
    Message.success(props.approved ? '审核通过成功' : '审核拒绝成功');
    emit('success');
    close();
  } catch (error) {
    console.error('审核失败:', error);
    if (error instanceof Error) {
      Message.error(error.message);
    } else {
      Message.error('审核失败');
    }
  } finally {
    submitting.value = false;
  }
}
</script>

<style scoped lang="less">
.review-form {
  .info-panel {
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 12px 16px;
    
    .panel-title {
      font-weight: 500;
      margin-bottom: 12px;
      font-size: 14px;
      color: #1D2129;
    }
    
    .panel-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 12px;
      
      .info-item {
        font-size: 13px;
        
        &:last-child {
          grid-column: span 2;
        }
        
        .info-label {
          color: #4E5969;
          margin-right: 8px;
        }
        
        .info-value {
          color: #1D2129;
          font-weight: 500;
          
          &.amount {
            color: #165DFF;
          }
          
          &.actual-amount {
            color: #FF5722;
          }
        }
      }
    }
  }
}
</style> 